<!--
 * @Description: 设置
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 16:39:56
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-05 17:16:24
 * @FilePath: \jiekuan-app\src\subPages\other\setting.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="设置"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      ></u-navbar>
    </div>
    <div class="page-content">
      <div
        class="item u-flex u-row-between u-col-center"
        v-for="(item, index) in listData"
        :key="index"
        @click="handleClick({ type: item.click })"
      >
        <span>{{ item.name }}</span>
        <div class="u-flex u-col-center">
          <span class="text" v-if="item.text">{{ item.text }}</span>
          <template v-if="item.right === 'arrow'">
            <u-icon name="arrow-right" color="#ffffff" size="28" class="u-m-l-20"></u-icon>
          </template>
          <template v-else>
            <u-switch v-model="item.switch" active-color="#FCC307" inactive-color="#C8C8C8" class="u-m-l-10"></u-switch>
          </template>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <div class="btn_box">
        <button class="btn" @click="apiLogout()">退出登录</button>
      </div>
    </div>
    <u-popup v-model="isPopup" width="630" mode="center" border-radius="8">
      <view class="pop_box">
        <div>提示</div>
        <div class="text u-m-t-26">注销请求发送后，十五天后悔自动生效，期间重新 登录会自动取消这一流程，是否继续？</div>
        <div class="pop_box_btn_box u-flex flex-end">
          <span class="pop_box_btn u-p-r-32" @click="isPopup = false">取消</span>
          <span class="pop_box_btn u-p-l-32">确定</span>
        </div>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'Setting', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'transparent' },
      listData: [
        { name: '我的账号', text: '', right: 'arrow', click: 'myAccount' },
        { name: '黑名单', text: '', right: 'arrow', click: 'blacklist' },
        { name: '用户协议', text: '', right: 'arrow',click:'protocol_user'},
        { name: '隐私协议', text: '', right: 'arrow',click:'protocol_privacy'},
        { name: '客服邮箱', text: 'support@xiaoyuanapp.com', right: 'arrow' },
        // { name: '首页隐身', text: '打开后用户将无法在首页列表中看到你', right: 'switch', switch: false },
        // { name: '隐私保护', text: '您回复后对方才可以解锁微信', right: 'switch', switch: false },
        // { name: '新消息通知', text: '', right: 'switch', switch: true },
        // { name: '关闭定向推送', text: '', right: 'switch', switch: false },
        { name: '当前版本', text: 'V3.3.2', right: 'arrow' },
      ], // 操作列表
      isPopup: false, // 弹窗
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 页面点击事件
    handleClick(options) {
      const { type } = options
      switch (type) {
        case 'log_off': // 注销
          this.isPopup = true
          break
        default:
          this.$jump({ name: type })
          break
      }
    },
	apiLogout() {
		this.$u.api.logout().then((res) => {
			this.$u.toast('退出成功~')
			setTimeout(() => {
				uni.clearStorageSync()
				this.$jump({
					name: 'login',
					type: 'replaceAll'
				})
			}, 2000)
		})
	},
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-content {
  padding: 20rpx 32rpx 0 40rpx;
}
.item {
  height: 75rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 38rpx;
}
.btn_box {
  padding: 0 95rpx 100rpx;
}
.btn {
  height: 90rpx;
  background: #ffffff;
  box-shadow: 0rpx 9rpx 43rpx 1rpx rgba(81, 90, 118, 0.33);
  border-radius: 45rpx;
  font-size: 38rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #000000;
  line-height: 90rpx;
}
.pop_box {
  padding: 47rpx 45rpx 37rpx 34rpx;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #000000;
  .text {
    font-size: 25rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #000000;
    line-height: 38rpx;
  }
}
.pop_box_btn_box {
  margin-top: 63rpx;
}
.pop_box_btn {
  display: inline-block;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  text-decoration: underline;
  color: #000000;
}
</style>
